﻿<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="UTF-8">
  <title>三维场景多点路径规划|室内三维可视化引擎|易景三维可视化平台ESmap</title>
  <meta name="keywords" content="多点路径规划,室内三维场景,三维场景引擎,三维场景制作,室内定位,易景三维场景,ESMap" />
  <meta name="description"
    content="多点路径规划,传入多个途经的点,返回一条导航路径,易景三维场景第三人称导航,易景室内三维可视化引擎提供三维场景浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内三维场景显示风格及样式，可自动绘制楼层热力图、散点图等专题三维场景，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的三维场景主题资源供二次开发调用。" />
  <link href="css/common.css" rel="stylesheet">
</head>
<style type="text/css">
  #pannel {
    position: absolute;
    left: 2%;
    bottom: 10%;
    z-index: 999;
  }

  button,
  input[type="button"] {
    padding: 7px 11px;
    background-color: #ccc;
    border: none;
    cursor: pointer;
    border-radius: 3px;
  }

  #description {
    position: absolute;
    left: 50%;
    top: 86px;
    padding: 10px 25px;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-left: -140px;
  }

  #tool-tip {
    position: absolute;
    color: #fff;
    font-size: 18px;
    height: 25px;
    line-height: 25px;
    padding: 0 5px;
    z-index: 2;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: none;
  }

  .container-fluid h1 {
    text-align: center;
  }
</style>

<body ms-controller="ctrl" class="ms-controller">
  <span id="tool-tip"> </span>
  <div id="map-container"></div>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <h1>易景室内三维可视化引擎 (多点路径规划)</h1>

      <div class="tips-right">
        <span class="tip1"></span>
        <a class="tip2" onclick="tipClick('/api/senior/pathPlan/')"></a>
      </div>
      <div class="tips-msg">
        <div class="msg msg1">
          <div class="erweima"></div>
          <p>手机扫一扫进入体验</p>
        </div>
        <div class="msg msg2">
          <h4>多点路径规划模拟导航</h4>
          <p>1. 多点路径规划,传入多个途经的点,返回一条导航路径</p>
          <p>2. 用于车辆/行人导航，自动计算路程和所剩时间</p>
          <p>3. new esmap.ESNavigation({...}) 创建导航对象</p>

          <div style="display: none">
            多点路径规划,传入多个途经的点,返回一条导航路径,易景室内三维可视化引擎提供三维场景浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内三维场景显示风格及样式，可自动绘制楼层热力图、散点图等专题三维场景，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的三维场景主题资源供二次开发调用。
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div id="description">
    暂无导航提示信息
  </div>
  <div id="pannel">
    <input type="button" class="btn btn-default btnclass" onclick="showRoutes()" value="显示多点路径规划" />
    <input type="button" class="btn btn-default btnclass" onclick="startNavi()" value="开始导航" />
  </div>
  <script src="../lib/config.js"></script>
  <script src="../lib/esmap-3.0.min.js"></script>
  <script src="../lib/jquery-2.1.4.min.js"></script>
  <script src="../lib/jquery.qrcode.min.js"></script>
  <script src="../lib/tips_controls.js"></script>
  <script type="text/javascript">
    //定义全局map变量
    var map;
    var esmapID = getQueryString('id') || defaultOpt.mapID;
    // 导航对象
    var navi;
    // 点击计数
    var clickCount = 0;
    var floorControl;
    var mapCoord = null;
    var building
    var routedInited = false;
    $(function () {
      if (navi) {
        navi.stop();
        navi = null;
      }
      // 楼层控制控件配置参数
      var ctlOpt = new esmap.ESControlOptions({
        position: esmap.ESControlPositon.RIGHT_TOP,
        imgURL: 'image/wedgets/'
        // allLayer: true
        // size:"normal"
      })
      var container = document.getElementById('map-container');
      map = new esmap.ESMap({
        mode: esmap.MapMode.Building,
        container: container, // 渲染dom
        mapDataSrc: '../data', //三维场景数据位置
        mapAudioSrc: '../lib',  //导航语音位置,导航的必须配置
        token: 'escope',
        focusAlphaMode: false
      });

      map.openMapById(esmapID);
      map.showCompass = true; //显示指南针 
      //三维场景加载完成回调
      map.on('loadComplete', function () {
        building = map.getBuilding();
        floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
        createNavi();
      });
    });

    function resetAll() {
      navi.stop();
      navi.clearAll();
      var floorLayer = building.getFloor(1)
      var layers = floorLayer.getLayersByNames('markers')
      if (layers[0]) {
        layers[0].removeAll();
      }
    }

    function createNavi() {
      if (building.naviData.length == 0) {
        console.warn("三维场景导航数据信息不存在！");
        return;
      }
      if (!navi) {
        //初始化导航对象
        navi = new esmap.ESNavigation({
          map: map,
          locationMarkerUrl: 'image/pointer.png',
          locationMarkerSize: 150,
          speed: 1,
          followAngle: true,
          followPosition: true,
          followGap: 3,
          tiltAngle: 30,
          audioPlay: true,
          // scaleLevel:0,
          mode: 1,
          offsetHeight: 1,
          // 设置导航线的样式
          lineStyle: {
            fixedWidth: true,
            color: '#58a2e4',
            //设置线为导航线样式
            lineType: esmap.ESLineType.ESARROW,
            // lineType: esmap.ESLineType.FULL,
            lineWidth: 5,
            offsetHeight: 0.5,
            smooth: true,
            seeThrough: false,
            noAnimate: true
            // 设置边线的颜色   
            // godEdgeColor: '#920000',
            // 设置箭头颜色
            // godArrowColor: "#ffffff"
          },
          scaleAnimate: true,
          isMultiFloors: false
        });
      }

      navi.on("walking", function (data) {
      })
      navi.on('naviTip', function (message) {
        $('#description').html(message)
      })

      navi.on("complete", function () {
        console.log("停止");
        document.getElementById('description').innerText = "到达终点";
      })
    }

    function showRoutes() {
      resetAll();
      var floorLayer = building.getFloor(1)
      var layer = floorLayer.getOrCreateLayerByName('markers', esmap.ESLayerType.TEXT_MARKER)
      var points = [
        {
          x: 12683440.762306975,
          y: 2557860.254868082,
          fnum: 1
        },
        {
          x: 12683431.592634823,
          y: 2557866.496353754,
          fnum: 1
        },
        {
          x: 12683444.57360346,
          y: 2557874.806226114,
          fnum: 1
        },
        {
          x: 12683464.002802169,
          y: 2557879.928353332,
          fnum: 1
        }
      ]
      // 12683438.7341726
      // 12683438.7341726
      points.forEach(function (p) {
        var im = new esmap.ESTextMarker({
          x: p.x,
          y: p.y,   //如果不添加x和y，则默认坐标在三维场景中心。
          image: 'image/user.png',  //图片标注的图片地址
          scale: 1,   			//图片大小 或者 size:{w:32,h:64},
          fixedSize: true,			//跟随三维场景缩放变化大小，默认为true，可选参数
          height: 1,    			//距离地面高度
          showLevel: 20,  		//三维场景缩放等级达到多少时隐藏,可选参数
          seeThrough: true,		//是否可以穿透楼层一直显示,可选参数
          //angle:30,  	//如果设置了就是固定marker角度，与三维场景一起旋转。(size需要重新设置)
          id: 2017,   			//id，可自定义
          name: 'myMarker'   		//name可自定义
        });
        layer.addMarker(im)
      })
      floorLayer.addLayer(layer)
      navi.queryByPoints(points)
      navi.drawNaviLine();
      if (!routedInited) {
        routedInited = true;
      }
    }
    function startNavi() {
      if (navi.isSimulating) {
        return;
      }
      if (routedInited) {
        resetAll();
        showRoutes();
      }
      //下句解决IOS苹果手机不能播放问题，不能删除
      map.ESAudioTool.playSoundByName('startNaving');
      navi.simulate();
    }
  </script>
</body>

</html>